import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {Icon, Popover, Tools, SearchBar} from "weaver-mobile";
import {ListViewPage, RouteLayout} from "weaver-mobile-page";
import {openHrmCard} from "../../../util";
import {WrListCard, WrListCardOperate, WrMenu, WrPicker, WrShow, WrAlertPage} from "../../../public";
import Detail from "./detail";

const getLabel = Tools.getLabel;

/**
 * 考核方案指标模板
 * jiansong 2020/3/4
 */
@inject("programItemStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            path: this.props.location.pathname
        }
        this.store = this.props.programItemStore;
    }

    componentDidMount() {
        this.store.doInit();
        this.store.initStore(this.props.location.pathname);
    }

    render() {
        const {canadd, list, getTableDatas, updateListData, queryParams, stabList, type, onSearchChange} = this.store;
        return (
            <div className="workrelate-performance-accessResult workrelate-listCard-reset workrelate-roll">
                <SearchBar
                    value={queryParams.name}
                    placeholder={getLabel(500351, "请输入关键字")}
                    showExtraButton
                    onChange={val => onSearchChange({"name": val})}
                    onSubmit={getTableDatas}
                />
                <ListViewPage.Normal
                    store={list}
                    heightSpace={canadd ? (window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52) : 0}
                    getTemplate={this.getTemplate}
                    renderSeparator={(section, index) => <WrListCardOperate key={index}/>}
                    onRowClick={data => this.handleRowClick(data)}
                />
                {canadd && <RouteLayout.ButtonGroup data={[{
                    key: "sure",
                    type: "primary",
                    text: getLabel('1421', '新增'),
                    onClick: () => this.props.history.push(this.state.path + "/detail"),
                }]}/>}
                <Route
                    key="programItem-detail"
                    path={this.state.path + "/detail"}
                    render={() => (
                        <RouteLayout>
                            <div className="wm-route-layout">
                                <Detail updateListData={updateListData}/>
                            </div>
                        </RouteLayout>
                    )}
                />
            </div>
        )
    }

    //行点击
    handleRowClick = (data) => {
        this.props.history.push(this.state.path + "/detail?id=" + data.id)
    }

    //获取数据模板
    getTemplate = (template) => {
        return {
            default: [{
                key: "col_1",
                render: data => <WrListCard data={[
                    {label: getLabel('33439', '名称'), value: data.name},
                    {label: getLabel('433', '描述'), value: data.description},
                    {label: getLabel(882, '创建人'), value: data.useridspan},
                    {label: getLabel(1339, '创建时间'), value: data.createdate},
                ]}/>
            }]
        }
    }

}

